<template>
	<view class="content">

		<view class="listBox">
			<attractionItemList :list="list"></attractionItemList>
		</view>


		<view style="width:100%;height:240rpx"></view>

	</view>
</template>

<script>
	import attractionItemList from '../components/attractionItemList.vue';

	import {
		scenicList
	} from '@/api/common'

	export default {
		components: {

			attractionItemList
		},
		data() {
			return { 
				pageSize: 10,
				pageNum: 1,
				total: 0,
				list: [],
			};
		},

		onLoad(option) {

		},
		onShow() {
			 this.reset()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.pageNum = parseInt(this.pageNum) + 1
				this.getList()
			}
		},
		methods: {
			// 重置
			reset() {
				this.list = []
				this.pageNum = 1
				this.total = 0

				this.$nextTick(() => {
					this.getList()
				})
			},
			getList() {

				let data = {
					page: this.pageNum,
					pageSize: this.pageSize, 
					classfiy:1
				}

				scenicList(data).then(res => {
					if (res.code == 200) {
						let list = res.data.list
						this.list = [...this.list, ...list]
						this.list = [...new Set(this.list)]
						this.total = res.data.total
						console.log(this.list)
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.content {
		// height: 100vh;
		// overflow-y: auto;
		box-sizing: border-box;
		background: #F6F1E5;

	}


	.listBox {
		padding: 0 30rpx;
		padding-top: 20rpx;
	}
</style>